<template>
  <div class="commnet-reply">
    <van-nav-bar
      :title="
        comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'
      "
    >
      <van-icon slot="left" name="cross" @click="$emit('close')"></van-icon>
    </van-nav-bar>
    <comment-item :comment="comment" />
    <comment-list :source="comment.com_id" type="c"
    :list="commentList"
     />
    <comment-post
      :target="comment.com_id"
      @post-success="onPostSuccess"
    />
  </div>
</template>

<script>
import commentItem from './comment-item'
import commentList from './comment-list'
import commentPost from './comment-post'
export default {
  components: { commentItem, commentList, commentPost },
  name: 'CommnetReply',
  props: {
    comment: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      commentList: []
    }
  },
  methods: {
    onPostSuccess (data) {
      this.comment.reply_count++
      this.$emit('close-reply')
      this.commentList.unshift(data.new_obj)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
